閱讀前，建議可以參考Day1：閱讀指南＆為何選擇這個題目？

▌挑戰簡介

• 題目：三十天用Vue.jS打造一個網路商城

• 挑戰內容：利用慕課網（IMOOC）的「Vue2.0+Node.js+MongoDB 全棧打造商城系統」＆六角學院的「Vue出一個電商網站」的課程嘗試在30天內打造網路商城。

• 本篇性質：純粹學習進度的紀錄，不會有詳細的教學或解釋，因此不適合認真閱讀

▌目標

• 製作一個登錄頁面，可以登陸/登出。
• 「登陸失敗」就清空帳號密碼
• 「登陸成功」就跳轉到index
• 「登出成功」就跳轉回登錄頁面

▌前置

• 設置好Vue Cli、Vue Router、Axios、Axios-router、bootstrap、node-sass、 sass-loader 環境
• 設置好config
• Bootstrap的登錄頁面：https://getbootstrap.com/docs/4.1/examples/

▌登錄頁面UI

• 在components開一個page -login
• 把bootstrap的html/css貼近去login
• 去router-index.js新增login的路由

▌登錄頁面邏輯

• data() { return {
  user: {
  username: "",
  password: ""
  }
  };

• HTML的input要貼上 v-model="user.username" `v-model="user.password"

記得用this才能取得user.username

• 把vm.use（帳密）的資料POST去後端this.$http.post(api, vm.user).then(response => {})
• 如果「成功」就跳轉去首頁 vm.$router.push("/index");
• 如果「失敗」就清空頁面 vm.user.username = "" vm.user.password = ""

<script>
export default {
  name: "login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    signin() {
      const api = `${process.env.APIPATH}/signin`;
      var vm = this;

      this.$http.post(api, vm.user).then(response => {
        console.log(response.data.success);
        if (response.data.success) {
          vm.$router.push("/index");
        }
        if (!response.data.success) {
          vm.user.username = "";
          vm.user.password = "";
        }
      });
    }
  }
};
</script>

▌登出頁面

• 在components開一個page -index
• 設置一個標籤@click.prevent="signout"

▌登出頁面邏輯

• export default的methods中新增一個signout()函式
• 登出成功跳就跳回「login頁面」
• 把logout的api傳回去給後端

 <div>
   <h1>index</h1>
   <a  href="#" @click.prevent="signout">logout</a>
</div>


<script>
export default {
  name: "login",
  data() {
    return {};
  },
  methods: {
    signout() {
      const api = `${process.env.APIPATH}/logout`;
      var vm = this;
      this.$http.post(api).then(response => {
        console.log(response.data.message);
        if (response.data.success) {
          vm.$router.push("/login");
        }
      });
    }
  }
};
</script>